<template>
  <!--机构与用户管理-->
  <section class="page user-manage">
    <el-row type="flex">
      <!-- 机构树 -->
      <el-col style="flex-basis:250px;border:1px solid #e4e4e4;min-height:595px;overflow:atuo">
        <el-col class="text-right tree-header">
          <el-button @click="addDeptClick()">添加机构</el-button>
        </el-col>
        <origanize-tree isIcon="true" ref="orgTree" :dataList="departmentInfo" @change="onChange" @add="onAdd" @edit="onEdit" @remove="onRemove"></origanize-tree>
      </el-col>
      <!-- 用户数据列 -->
      <el-col style="margin-left:20px;width:500px;flex-grow:1">
        <!-- 搜索框 -->
        <data-form :model="searchCondition" @onSearch="refreshUserData" :page="pageService">
          <template slot="default-input">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="searchCondition.userName"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="searchCondition.realName"></el-input>
            </el-form-item>
          </template>
          <template slot="default-button">
            <el-button @click="onAddUser">新增用户</el-button>
          </template>
        </data-form>
        <!-- 用户数据列 -->
        <data-box :data="userList" :selectionList.sync="selectionList" @onPageChange="refreshUserData" :page="pageService" ref="data-box">
          <template slot="columns">
            <el-table-column prop="userName" label="用户名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="realName" label="姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="department.deptName" label="所属机构" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="status" label="状态" :min-width="$helper.getColumnWidth(3)">
              <template slot-scope="scope">
                <span v-if="scope.row.status == EnableStatus.Enable">启用</span>
                <span v-if="scope.row.status == EnableStatus.Disable">停用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" :min-width="$helper.getColumnWidth(8)">
              <template slot-scope="scope">
                <el-button type="text" @click="modifyClick(scope)">修改</el-button>
                <el-button type="text" @click="assignRoleClick(scope)">分配角色</el-button>
              </template>
            </el-table-column>
          </template>
        </data-box>

        <!--添加机构-->
        <el-dialog title="添加机构" @close="isOpenAddDeptDialog = false" :visible.sync="isOpenAddDeptDialog" width="450px" :close-on-click-modal="false" :show-close="false">
          <add-organize @close="isOpenAddDeptDialog = false" @refresh="updateDepartment" :deptPid="selectDeparmrnt.id" ref="add-dept"></add-organize>
        </el-dialog>

        <!--修改机构-->
        <el-dialog title="修改机构" @open="modifyDialogOpen" @close="isOpenModifyDeptDialog = false" :visible.sync="isOpenModifyDeptDialog" width="450px" :close-on-click-modal="false" :show-close="false">
          <modify-organize @refresh="updateDepartment" ref="modify-dept" :originDeptData="selectDeparmrnt" @close="isOpenModifyDeptDialog = false"></modify-organize>
        </el-dialog>

        <!--添加用户-->
        <el-dialog title="添加用户" @close="isOpenCreateUserDialog = false" :visible.sync="isOpenCreateUserDialog" width="700px" :close-on-click-modal="false" :show-close="false">
          <create-user @refresh="refreshUserData" ref="create-user" :deptId="selectDeparmrnt.id" @close="isOpenCreateUserDialog = false"></create-user>
        </el-dialog>

        <!--修改用户-->
        <el-dialog title="修改用户" @open="modifyUserDialogOpen" @close="isOpenModifyUserDialog = false" :visible.sync="isOpenModifyUserDialog" width="700px" :close-on-click-modal="false" :show-close="false">
          <modify-user @refresh="refreshUserData" ref="modify-user" @close="isOpenModifyUserDialog = false"></modify-user>
        </el-dialog>

        <!--分配角色-->
        <el-dialog title="分配角色" @close="isOpenAssignRoleDialog = false" :visible.sync="isOpenAssignRoleDialog" width="700px" :close-on-click-modal="false" :show-close="false">
          <assign-role ref="assign-role" @close="isOpenAssignRoleDialog = false" :userId="rowUserObj.id"></assign-role>
        </el-dialog>

      </el-col>
    </el-row>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/util/page.service";
import { Action, State, Mutation, Getter, namespace } from "vuex-class";
import { DepartmentService } from "~/service/service-manage/department.service";
import { UserService } from "~/service/service-manage/user.service";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import OriganizeTree from "~/components/system-manage/department-user-manage/origanize-tree.vue";
import AddOrganize from "~/components/system-manage/department-user-manage/add-organize.vue";
import ModifyOrganize from "~/components/system-manage/department-user-manage/modify-organize.vue";
import CreateUser from "~/components/system-manage/department-user-manage/create-user.vue";
import ModifyUser from "~/components/system-manage/department-user-manage/modify-user.vue";
import AssignRole from "~/components/system-manage/department-user-manage/assign-role.vue";
import { EnableStatus } from "~/config/enum/dict/dict-item.enum";
import { from } from "rxjs/observable/from";
const systemManageModule = namespace("system-manage");

@Layout("workspace")
@Component({
  components: {
    OriganizeTree,
    AddOrganize,
    ModifyOrganize,
    CreateUser,
    ModifyUser,
    DataBox,
    DataForm,
    AssignRole
  }
})
export default class DepartmentUserManage extends Vue {

  private EnableStatus: any = EnableStatus;

  @Dependencies(DepartmentService) private departmentService: DepartmentService;
  @Dependencies(UserService) private userService: UserService;
  @Dependencies(PageService) private pageService: PageService;

  @Action getDepartmentList;

  @systemManageModule.State departmentInfo;

  @systemManageModule.Action("updateDepartment") updateDepartment;

  // 当前选中的机构
  private selectDeparmrnt: any = {};
  // 用户列表
  private userList: Array<any> = [];
  private selectionList: Array<any> = [];
  private rowUserObj: any = {};

  // 控制弹框
  private isOpenAddDeptDialog: boolean = false;
  private isOpenModifyDeptDialog: boolean = false;
  private isOpenCreateUserDialog: boolean = false;
  private isOpenModifyUserDialog: boolean = false;
  private isOpenAssignRoleDialog: boolean = false;

  private searchCondition: any = {
    userName: '',
    realName: '',
    tel: '',
    deptCode: ''
  }

  private activated() {
    this.updateDepartment();
  }

  /**
   * 树change
   */
  private onChange(value) {
    // 默认选中机构
    this.selectDeparmrnt = value;
    // 获取用户数据
    this.refreshUserData()
  }

  /**
   * 机构树添加按钮点击事件
   */
  private onAdd(value) {
    this.isOpenAddDeptDialog = true;
  }

  /**
   * 机构修改点击时间
   */
  private onEdit() {
    this.isOpenModifyDeptDialog = true
  }

  /**
   * 删除节点
   */
  private onRemove(value) {
    this.departmentService.deleteDept(value.id).subscribe(
      () => {
        this.updateDepartment();
        this.$message.success("删除成功")
      },
      ({ msg }) => this.$message.error(msg)
    )
  }

  /**
   * 刷新机构树
   */
  private refresh() {
    this.$nextTick(() => {
      let form: any = this.$refs['orgTree'];
      form.refresh();
    });
  }

  /**
   * 添加机构点击事件
   */
  private addDeptClick() {
    if (!this.selectDeparmrnt) {
      this.$message.warning('请先选择机构')
      return
    }
    this.isOpenAddDeptDialog = true;
  }

  /**
   * 修改机构弹框打开触发事件
   */
  private modifyDialogOpen() {
    this.$nextTick(() => {
      let modifyDept: any = this.$refs["modify-dept"]
      modifyDept.isOpen()
    })
  }

  /**
   * 用户列表搜索
   */
  private refreshUserData() {
    let searchModel = Object.assign({}, this.searchCondition, { 'deptCode': this.selectDeparmrnt.deptCode })
    this.userService.findUserListByPage(searchModel, this.pageService).subscribe(
      data => {
        this.userList = data
      },
      ({ msg }) => {
        this.$message.error(msg)
      })
  }

  /**
   * 添加用户按钮点击事件
   */
  private onAddUser() {
    this.isOpenCreateUserDialog = true
  }

  /**
   * 修改用户按钮点击事件
   */
  private modifyClick(scope) {
    this.isOpenModifyUserDialog = true
    this.rowUserObj = scope.row
  }

  /**
   * 修改用户弹窗打开
   */
  private modifyUserDialogOpen() {
    this.$nextTick(() => {
      let modifyUserRef: any = this.$refs["modify-user"]
      modifyUserRef.refresh(this.rowUserObj)
    })
  }

  /**
   * 分配角色按钮点击事件
   */
  private assignRoleClick(scope) {
    this.rowUserObj = scope.row
    this.isOpenAssignRoleDialog = true
    this.$nextTick(() => {
      let assignRoleRef: any = this.$refs["assign-role"]
      assignRoleRef.refreshData()
    })
  }
}
</script>
<style lang="less" scoped>
</style>
